<template>
  <div style="display: flex">
    <div style="flex: 1; display: flex; align-items: center">
      <IconifyIconOnline
        icon="line-md:account"
        style="color: white"
        width="60px"
        height="60px"
      />
      <div style="margin-left: 10px">
        <p style="font-size: 18px; font-weight: bold; margin: 0">
          {{ count }}
        </p>
        <p style="margin: 0">空气质量检测总数量</p>
      </div>
    </div>

    <div style="flex: 1; display: flex; align-items: center">
      <IconifyIconOnline
        icon="ph:sun-dim-duotone"
        style="color: white"
        width="60px"
        height="60px"
      />
      <div style="margin-left: 10px">
        <p style="font-size: 18px; font-weight: bold; margin: 0">
          {{ goodCount }}
        </p>
        <p style="margin: 0">空气质量良好数量</p>
      </div>
    </div>

    <div style="flex: 1; display: flex; align-items: center">
      <IconifyIconOnline
        icon="ph:cloud-fog-duotone"
        style="color: white"
        width="60px"
        height="60px"
      />
      <div style="margin-left: 10px">
        <p style="font-size: 18px; font-weight: bold; margin: 0">
          {{ badCount }}
        </p>
        <p style="margin: 0">空气质量污染数量</p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="NumberChart">
import { listOtherData } from "@/api/aqiMeasuredResult";
import { onMounted, ref } from "vue";
const count = ref(0);
const goodCount = ref(0);
const badCount = ref(0);
const listOtherDataList = async () => {
  try {
    const { data } = await listOtherData();
    count.value = data.count;
    goodCount.value = data.goodCount;
    badCount.value = count.value - goodCount.value;
    console.log("获取其他数据成功:", data);
  } catch (error) {
    console.error("获取其他数据时出错:", error);
  }
};
onMounted(() => {
  listOtherDataList();
});
</script>

<style scoped>
p {
  color: white;
}
IconifyIconOnline {
  fill: white;
}
</style>
